Alexgogoing

css基本功 border-image

css
字数统计: 409阅读时长: 1 min
2021/06/01 Share

[css基本功]border-image

最近在做cocos的时候，频繁涉及到九宫格切图，猜测cocos九宫格在web端的实现一定是css中的border-image

释义

border-image 共有以下五种属性

image-20210607172023937

这里，我们先只了解border-image-source、border-image-slice、border-image-repeat这三个属性。

border-image-source：边框的原始图片地址，这里特别说明一下，想要border-image生效，必须设置border的宽度和类型。

border-image-slice：边框图片的切割位置，最多有4个值，按照上右下左的顺序对应，赋值办法参考padding，另外赋值时默认单位为像素，不需要加px，支持百分比例如10%，有一个特殊值 fill，代表是否需要用九宫格图片中心填充元素，例如不加fill，只显示四周边框红色，content背景为白色，设置了fill，四周边框和content都为红色。

border-image-repeat：边框图片除四角外的拉伸方式，有三个可选值repeat（重复）、round（平铺）和round（拉伸）；使用1个参数则表示水平方向及垂直方向均使用此参数；2个参数的话则第一个参数表示水平方向，第二个参数表示垂直方向

Coding

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
 .container {
    display: block;
    border: 1px solid #bbb;
    padding: 50px;
    text-align: center;
  }
  .container > .bg {
    display: inline-block;
    width: 160px;
    height: 30px;
    line-height: 30px;
    border-top: 18px solid;
    border-right: 30px solid;
    border-bottom: 18px solid;
    border-left: 30px solid;
    border-image-source: url('./pow.png');
    border-image-slice: 18 30 18 30 fill;
    border-image-repeat: round;
    padding: 10px;
  }
</style>
<div class="container">
  <div class="bg">文字</div>
</div>

效果

image-20210607182634864

原文作者：alexgogoing

原文链接：https://alexgogoing.github.io/2021/06/01/[css基本功]border-image/

发表日期：June 1st 2021, 12:30:00 pm

更新日期：June 8th 2021, 8:43:41 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. [css基本功]border-image
    1. 1.1. 释义
    2. 1.2. Coding
    3. 1.3. 效果
Total : 17
2022
2021
2020
2019
html css 布局 算法 javascript 奇技 web 性能优化